import Vue from "vue";
import Vuex from "vuex";
// import { INCREMENT } from "./mutation-types";

Vue.use(Vuex);

const ratedApi = () => {
  return fetch("http://www.pudge.wang:3080/api/rated/list")
    .then((response) => response.json())
    .then((res) => {
      return res;
    });
};

// 创建仓库实例
const store = new Vuex.Store({
  // state表示状态，全局的数据
  state: {
    count: 10,
    name: "zhangmou",
    age: 18,
    sex: 1,
    likes: [298, 398, 698],
    list: [1, 2, 3, 4, 5, 6, 7],
    sjc: 1658125409992,

    ratedList: [],
  },
  // getters其实就是vuex的计算属性
  // getters里面写的是函数, 函数可以接收state作为参数
  getters: {
    time(state) {
      const date = new Date(state.sjc);
      const YY = date.getFullYear() + "-";
      const MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      const DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      const hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      const mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      const ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return YY + MM + DD + " " + hh + mm + ss;
    },
  },
  // mutations是唯一可以改变state的地方
  // mutations是写函数的, 可以接收一个参数state
  // 还可以接收第二个参数是payload， 在大多数情况下，载荷应该是一个对象
  // mutations的函数必须是同步函数, 因为开发工具的快照是在mutations函数执行的时候产生的，而不是在数据改变的时候产生
  mutations: {
    increment(state, payload) {
      // setTimeout(() => {
      state.count += payload.num;
      // }, 2000);
    },
    decrement(state) {
      state.count--;
    },
    getRatedList(state, payload) {
      state.ratedList = payload.result;
    },
  },
  // 写法和mutations几乎是一致的，但是里面可以写异步函数
  // actions也有一个参数context
  actions: {
    incrementAsync({ commit }, payload) {
      // console.log("incrementAsync");
      setTimeout(() => {
        // 等异步结束，再去调用mutations的函数
        // console.log(context);
        commit("increment", payload);
      }, 2000);
    },
    getRatedListAsync({ commit }) {
      // 在这里请求数据
      return new Promise((resolve) => {
        ratedApi().then((res) => {
          commit("getRatedList", res);
          resolve();
        });
      });
    },
  },
  modules: {},
});

export default store;
